<template>
    <div class="container">
        <div class="top">
            <div class="title">{{ title }}</div>
            <div class="info">
                <div class="company">{{ info.company }}</div>
                <div class="right">
                    <div class="b-left">
                        <div class="icon"></div>
                        <div>{{ info.look }}</div>
                    </div>
                    <div class="b-right">{{ info.date }}</div>
                </div>
            </div>
        </div>

        <div class="img">
            <img src="../assets/otto/detail/image.png" alt="">
        </div>

        <div class="wordtest">
            <vue-office-docx :src="docx" :options="editorOptions" @rendered="rendered"/>
        </div>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
export default {
    components:{
        VueOfficeDocx
    },
    data() {
        return {
            title: '气体检测基础知识',
            info: {
                company: '奥托工业互联网',
                look: 453,
                date: new Date().toLocaleDateString()
            },
            docx: 'http://static.shanhuxueyuan.com/test6.docx',
            editorOptions: {
                toolbar: true,
                width: '100x',
                height: '600px'
            }
        }
    },
    methods: {
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    background-color: #fff;
    padding: 0px 20px 16px 20px;
}

/* 顶部内容 */
.top {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px 0;
}
.top .title {
    color: #000306;
    font-size: 19px;
    font-weight: 800;
    padding: 10px 0;
}
.info {
    display: flex;
    justify-content: space-between;
    color: #aeaeae;
    font-size: 11px;
}
.info .right {
    display: flex;
    align-items: center;
}
.info .right .b-left {
    display: flex;
    align-items: center;
    border-right: 1px solid #686969;
    padding-right: 8px;
}
.info .right .b-left .icon{
    height: 10px;
    width: 10px;
    background: url('../assets/otto/zx/icon-look.png') no-repeat 0px 0px;
    background-size: 100% 100%;
}
.info .right .b-right {
    padding-left: 8px;
}


/* 图像 */
.img {
    width: 100%;
    height: 218px;
    overflow: hidden;
}
.img img {
    height: 100%;
    width: 100%;
}


/* 文本内容 */


/* word */
.wordtest {
    width: 100%;
    /* 底部距离 */
    margin-bottom: 70px;
}
</style>